<template>
  <div class="page" :style="{transform:getTransform}">
    <slot></slot>
  </div>
</template>

<script>
  export default{
    name: 'page',
    data: function () {
      return {}
    },
    props: {
      px: {default: 0},
      py: {default: 0},
      pz: {default: 0},
      rx: {default: 0},
      ry: {default: 0},
      rz: {default: 0}
    },
    computed: {
      getTransform: function () {
        return 'translate(-50%, -50%) translate3d(' + this.px + 'px, ' +
          this.py + 'px, ' + this.pz + 'px) rotateX(' + this.rx +
          'deg) rotateY(' + this.ry + 'deg) rotateZ(' + this.rz + 'deg) scale(1)'
      }
    }
  }
</script>

<style>
  .page {
    width: 950px;
    height: 450px;
    position: absolute;
    transform-style: preserve-3d;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    padding: 40px 30px;
    border-radius: 10px;
    opacity: 0.85;
    filter: none;
  }
</style>
